package com.zwl.composedemowan.widgets

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.zwl.composedemowan.R
import com.zwl.composedemowan.ui.main.home.TabTitle

/**
 * 自定义文本标签式Tab布局组件
 * @param index 当前选中的Tab索引
 * @param tabTexts Tab标签的文本列表
 * @param modifier 布局修饰符
 * @param contentAlign 内容对齐方式（默认居中）
 * @param bgColor Tab栏背景颜色（默认蓝色）
 * @param contentColor Tab文本颜色（默认白色）
 * @param onTabSelected Tab选中时的回调函数
 */
@Composable
fun TextTabBar(
    index: Int,
    tabTexts: List<TabTitle>,
    modifier: Modifier = Modifier,
    contentAlign: Alignment = Alignment.Center,
    bgColor: Color = Color(0xFF3489FF),
    contentColor: Color = Color.White,
    onTabSelected: ((index: Int) -> Unit)? = null
) {
    // 使用Box作为基础布局容器，支持水平滚动
    Box(
        modifier = modifier
            .fillMaxWidth()    // 充满父容器宽度
            .height(54.dp)     // 固定高度54dp
            .background(bgColor) // 设置背景颜色
            .horizontalScroll(state = rememberScrollState()) // 添加水平滚动支持
    ) {
        // 横向排列的Tab标签容器
        Row(
            modifier = Modifier
                .align(contentAlign) // 根据参数设置对齐方式
        ) {
            // 遍历生成所有Tab标签
            tabTexts.forEachIndexed { i, tabTitle ->
                Text(
                    text = tabTitle.text,
                    fontSize = if (index == i) 20.sp else 15.sp, // 选中Tab放大文字
                    fontWeight = if (index == i) FontWeight.SemiBold else FontWeight.Normal, // 选中Tab加粗
                    modifier = Modifier
                        .align(Alignment.CenterVertically) // 垂直居中
                        .padding(horizontal = 10.dp)       // 左右内边距
                        .clickable { onTabSelected?.invoke(i) }, // 点击事件
                    color = contentColor
                )
            }
        }
    }
}

/**
 * 首页搜索栏组件
 * @param onSearchClick 点击搜索栏时的回调函数
 */
@Composable
fun HomeSearchBar(
    onSearchClick: () -> Unit,
) {
    // 外层横向布局容器
    Row(
        modifier = Modifier
            .fillMaxWidth()  // 充满宽度
            .height(42.dp)   // 固定高度42dp
            .background(color = Color(0xFF3489FF)), // 深灰色背景
    ) {
        // 可点击的搜索区域
        Row(
            modifier = Modifier
                .padding(horizontal = 32.dp) // 左右边距32dp
                .height(30.dp)               // 高度30dp
                .align(alignment = Alignment.Top) // 顶部对齐
                .weight(1f)                  // 权重分配剩余空间
                .background(
                    color = Color(0xFFFFFFFF), // 白色背景
                    shape = RoundedCornerShape(12.5.dp) // 圆角矩形
                )
                .clickable { onSearchClick() } // 点击事件回调
        ) {
            // 搜索图标
            Icon(
                painter = painterResource(id = R.drawable.ic_search),
                contentDescription = "搜索",
                tint = Color(0xFF1E1E1E), // 图标颜色
                modifier = Modifier
                    .size(25.dp)         // 图标尺寸
                    .padding(start = 10.dp) // 左边距
                    .align(Alignment.CenterVertically) // 垂直居中
            )
            // 提示文字容器
            Box(
                modifier = Modifier
                    .weight(1f)          // 占据剩余空间
                    .align(Alignment.CenterVertically) // 垂直居中
                    .padding(start = 10.dp) // 左边距
            ) {
                Text(
                    text = "搜索关键词以空格形式隔开",
                    fontSize = 13.sp,    // 较小字号
                    color = Color(0xFF888888) // 灰色提示文字
                )
            }
        }
    }
}